import {useState} from 'react'
import {ThemeProvider, useTheme} from 'styled-components'
import styled from 'styled-components';
 
const Button = styled.button`
  background-color: ${props => props.theme.colors.primary};
  color: ${props => props.theme.colors.background};
`;

const defaultTheme = {
    colors: {
      primary: '#f00',
      secondary: '#6c757d',
      background: '#fff'
    },
    fontSizes: {
      small: '12px',
      medium: '16px',
      large: '20px'
    }
  };
   
  const darkTheme = {
    colors: {
      primary: '#6610f2',
      secondary: '#5a5a5a',
      background: '#343a40'
    },
    fontSizes: {
      small: '12px',
      medium: '16px',
      large: '20px'
    }
  };

  const Tab = function(props) {
    const theme = useTheme();
    console.log(props);
    console.log('theme', theme);
    
    return <>
        <div>
            <h1>Tab</h1>
        </div>
    </>
  }


const Theme = function () {
    const [theme, setTheme] = useState(defaultTheme);
    const toggleTheme = () => {
      setTheme(theme === defaultTheme ? darkTheme : defaultTheme);
    }
      return <ThemeProvider theme={theme}>
        <div>
            <h1>主题</h1>
            <Button onClick={toggleTheme}>按钮</Button>
            <hr />
            <Tab />
        </div>
      </ThemeProvider>
}

export default Theme;